<template>
  <div class="repairForm">
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          <span style="margin-left: -88%; font-size: 30px; font-family: '宋体';font-weight:bold"
            >报修设置</span
          >
          <el-breadcrumb
            style="margin-left: 20px; margin-top: 8px"
            separator="/"
          >
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>报修管理</el-breadcrumb-item>
            <el-breadcrumb-item>报修设置</el-breadcrumb-item>
          </el-breadcrumb>
        </div></el-col
      >
    </el-row>

    
    <el-row style="height: 60px">
      <el-col :span="12"
        ><div
          class="grid-content bg-purple"
          style="text-align: left; margin-left: 20px; font-weight: bold"
        >
          报修设置
        </div></el-col
      >
      <el-col :span="12"
        ><div
          class="grid-content bg-purple-light"
          style="text-align: right; margin-right: 20px"
        >
          <!-- 添加 -->
          <el-button
            type="success"
            @click="addUI"
            size="mini"
            icon="el-icon-edit"
            >添加</el-button
          >
        </div>

        <!-- 添加UI -->
        <el-dialog
          title="报修设置"
          :visible.sync="addTag"
          :close-on-click-modal="false"
          @close="clear"
          :append-to-body="true"
          width="500px"
        >
          <el-form
            :model="repForm"
            :rules="rules"
            ref="repForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="报修内容" prop="fromName">
              <el-input
                v-model="repForm.fromName"
                placeholder="必填，请填写报修内容"
              ></el-input>
            </el-form-item>

            <el-form-item label="公共区域" prop="isPublic">
              <el-select
                style="width: 100%; margin-left: 1px"
                filterable
                v-model="repForm.isPublic"
                placeholder="是否公共区域"
              >
                <el-option
                  v-for="item in tag1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="报修位置" prop="repAddress">
              <el-cascader
                v-model="repForm.repAddress"
                :options="houseinfo"
                :props="options"
                clearable
                placeholder="请选择报修位置"
              ></el-cascader>
            </el-form-item>

            <el-form-item style="margin-left: 60px">
              <el-button type="primary" @click="submitForm('repForm')"
                >保存</el-button
              >
              <el-button @click="resetForm('repForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-col>
    </el-row>
    <el-table :data="pagination" style="width: 100%">
      <el-table-column prop="fromName" label="报修内容" align="center"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"> </el-table-column>
      <el-table-column prop="repAddress" label="报修位置" align="center"> </el-table-column>
      <el-table-column prop="isPublic" label="公共区域" align="center"> </el-table-column>
      <el-table-column prop="isVisit" label="是否回访" align="center"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button @click="updateUI(scope.row)" size="mini" type="primary">修改</el-button>
          <el-button @click="insurance(scope.row.formId)" size="mini" type="info"
            >报修师傅</el-button
          >
          <el-button size="mini" @click="deleteForm(scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="page"
      :current-page="currentPage"
      :page-sizes="[10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "RepForms",
  data() {
    return {
      pagination: [],
      repFormDto: {
        fromName: null,
        isPublic: null,
        isSuccess: null,
      },
      options: {
        value: "name",
        label: "name",
        checkStrictly: true,
        children: "houseList",
      },

      rules: {
        fromName: [
          { required: true, message: "请输入报修内容", trigger: "blur" },
        ],

        isPublic: [
          { required: true, message: "请选择是否公共区域", trigger: "change" },
        ],
      },

      tag1: [
        { value: "是", label: "是" },
        { value: "否", label: "否" },
      ],
      currentPage: 1,
      total: 0,
      pageSize: 10,

      houseinfo: [],
      selectedOptions: null,
      addform: "",

      addTag: false,
      formLabelWidth: "120px",
      repForm: {
        formId: "",
        fromName: "",
        isPublic: "",
        repAddress: [],
        createTime: "",
        isVisit: "否",
        isSuccess: "未完成",
        isAccepted: "未处理",
        
      },
    };
  },
  components: {},
  methods: {
    //分页信息显示
    page(curPage) {
      let url = "/leanyuan/rep-form/findForm?pageNum=" + curPage;
      this.$axios
        .get(url)
        .then((resp) => {
          this.pagination = resp.data.data.records;
          this.currentPage = resp.data.data.current;
          this.total = resp.data.data.total;
          this.pageSize = resp.data.data.size;

          console.log(resp.data.data);
          console.log(this.currentPage);
        })
        .catch((ex) => {});
    },

    //每页显示的记录数发生改变，查询
    handleSizeChange(pageSize) {
      this.find(this.pagination.current, pageSize);
    },
    //当前页面发生改变，查询
    handleCurrentChange(page) {
      this.find(page, this.pagination.size);
    },

    //楼房信息显示
    house() {
      let url = "/leanyuan/rep-form/findHouse";
      this.$axios
        .get(url)
        .then((resp) => {
          this.houseinfo = resp.data.data;
          console.log(this.houseinfo);
        })
        .catch((ex) => {});
    },
    addUI() {
      this.addTag = true;
      this.getTime();
    },

    //添加
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.repForm.repAddress = this.repForm.repAddress.join(" ");
          this.$axios
            .post("/leanyuan/rep-form/addForm", this.repForm)
            .then((resp) => {
              if (resp.data.status == "200") {
                //确认后跳转到详情页
                console.log(resp);
                this.$alert("成功!", "提示", {
                  confirmButtonText: "确定",
                  callback: (action) => {
                    this.addTag = false;
                  },
                });
              } else {
                this.$alert("提交失败");
              }
              this.page(this.currentPage);
              console.log(this.currentPage);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    getTime() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hour = date.getHours();
      const minute = date.getMinutes();
      const second = date.getSeconds();
      this.month = check(month);
      this.day = check(day);
      this.hour = check(hour);
      this.minute = check(minute);
      this.second = check(second);
      function check(i) {
        const num = i < 10 ? "0" + i : i;
        return num;
      }
      this.repForm.createTime =
        year +
        "-" +
        this.month +
        "-" +
        this.day +
        " " +
        this.hour +
        ":" +
        this.minute +
        ":" +
        this.second;
    },

    //修改
    updateUI(row) {
      this.addTag = true;
      this.repForm = row;
      if (this.repForm.repAddress.length > 2) {
        this.repForm.repAddress = this.repForm.repAddress.split(" ");
        this.repForm.repAddress[1] = parseInt(this.repForm.repAddress[1]);
      }
      console.log(this.repForm);
    },

    //退出添加页面时清空添加页面数据
    clear() {
      this.repForm = {
        formId: "",
        fromName: "",
        isPublic: "",
        repAddress: "",
        createTime: "",
        isVisit: "否",
        isSuccess: "未完成",
        isAccepted: "未处理",
      };
    },

    clear2() {
      this.repFormDto = {
        fromName: null,
        isPublic: null,
        isSuccess: null,
      };
    },

    //删除
    deleteForm(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          //调用服务端的处理，然后再给出成功提示
          let url = "/leanyuan/rep-form/delete/" + row.formId;
          this.$axios
            .delete(url)
            .then((resp) => {
                console.log(resp.data)
              if (resp.data.status=="200" ) {
                //确认后跳转到详情页
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } 
              if(resp.data.status=="400" ) {
                this.$message.error('该报修单正在处理中!');
              }

              this.page(this.currentPage);
            })
            .catch((ex) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //重置添加UI
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //带值跳转到添加维修人员页面
    insurance(id) {
      this.$router.push({
        path: `/repairs/RepairMaster/${id}`,
      });
    },
  },
  mounted() {
    this.page(1);
    this.house();
  },
};
</script>

<style  scoped>
.repairForm {
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  background-color: white;
  height: 80px;
}
.el-cascader {
  width: 100%;
}
.grid-content {
  border-radius: 4px;
  min-height: px;
}
.row-bg {
  padding: 10px 0;
}
</style>
